{extend name="public/base" /}
{block name="title"}
<h1>添加用户</h1>
{/block}
{block name="content"}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header">
                </div>
                <form class="form-horizontal" action="{:url('user/add')}" method="post" id="subForm">
                    {:token()}
                    <div class="box-body">
                        <div class="form-group">
                            <label for="user_account" class="col-sm-3 control-label"><span class="text-danger">* </span>用户账号</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="user_account" name="user_account"
                                       value="{$Think.session.form_info.user_account|default=''}" placeholder="用户编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_password" class="col-sm-3 control-label"><span class="text-danger">* </span>密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="user_password" name="user_password"
                                       value="{$Think.session.form_info.user_password|default=''}" placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_check_password" class="col-sm-3 control-label"><span class="text-danger">* </span>确认密码</label>
                            <div class="col-sm-4">
                                <input type="password" class="form-control" id="user_check_password" name="user_check_password"
                                       value="{$Think.session.form_info.user_check_password|default=''}" placeholder="确认密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_name" class="col-sm-3 control-label"><span class="text-danger">* </span>用户名称</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="user_name" name="user_name"
                                       value="{$Think.session.form_info.user_name|default=''}" placeholder="用户名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_phone" class="col-sm-3 control-label">手机号</label>
                            <div class="col-sm-4">
                                <input type="number" class="form-control" id="user_phone" name="user_phone"
                                       value="{$Think.session.form_info.user_phone|default=''}" placeholder="手机号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_email" class="col-sm-3 control-label">邮箱</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="user_email" name="user_email"
                                       value="{$Think.session.form_info.user_email|default=''}" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="user_role" class="col-sm-3 control-label">选择角色</label>
                            <div class="col-sm-4">
                                <select name="user_role_id" class="form-control" id="user_role">
                                    {volist name="role" id="vo"}
                                    <option value="{$vo.role_id}" {if $Think.session.form_info.role_id==$vo.role_id}selected{/if}>{$vo.role_name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 col-md-offset-3 checkbox">
                                <label>
                                    <input type="checkbox" name="user_status" id="user_status" value="1" {if $Think.session.form_info.user_status==1}checked{/if}>
                                    是否启用
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <a href="javascript:" class="btn btn-default" onclick="doGoBack()">
                            <i class="fa fa-arrow-left"></i>返回
                        </a>
                        <button type="submit" class="btn btn-primary col-md-offset-3">
                            <i class="fa fa-save"></i>保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
{load href="/static/common/js/validate/jquery.validate.min.js"}
{load href="/static/common/js/validate/messages_zh.min.js"}
{load href="/static/common/js/validate/base.validate.js"}
<script>
    var doGoBack = function () {
        window.location.href = "{:url('user/index')}";
    };
    $(function () {
        var e = "<i class='fa fa-times-circle'></i>";
        $("#subForm").validate({
            rules: {
                user_account: {
                    required: true,
                    maxlength: 20,
                    isAccountMatch: true
                },
                user_password: {
                    required: true,
                    rangelength: [6, 16]
                },
                user_name: {
                    required: true,
                    maxlength: 20
                },
                user_email: {
                    isEmailMatch: true
                },
                user_check_password: {
                    required: true,
                    equalTo: "#user_password"
                },
                user_phone: {
                    isPhoneMatch: true
                }
            },
            messages: {
                user_account: {
                    required: e + "请输入用户编号",
                    maxlength: e + "用户编号长度不能超过20个字符",
                    remote: e + "该用户名已存在"
                },
                user_password: {
                    required: e + "请输入密码",
                    rangelength: e + "密码长度在6到16个字符之间"
                },
                user_name: {
                    required: e + "请输入用户名称",
                    maxlength: e + "用户名称不能超过20个字符"
                },
                user_check_password: {
                    required: e + "请输入确认密码",
                    equalTo: e + "两次输入密码不一致"
                }
            }
        });
        $.validator.addMethod("isAccountMatch", function (value, element, params) {
            var userAccount = /^[A-Za-z0-9]+$/;
            return this.optional(element) || (userAccount.test(value));
        }, "会员编号只能输入字母或数字");
        $.validator.addMethod("isPhoneMatch", function (value, element, params) {
            var phone = /^1[34578]\d{9}$/;
            return this.optional(element) || (phone.test(value));
        }, "请输入正确的手机号");
        $.validator.addMethod("isEmailMatch", function (value, element, params) {
            var email = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
            return this.optional(element) || (email.test(value));
        }, "请输入正确的邮箱");
    });
</script>
{/block}